<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        li{
            list-style: none;
        }

        .box{
            position: relative;
            width: 100vw;
            height: 47.4667vw;
            background-color: #aaa;
            /* overflow: hidden; */
        }

        .box ul{
            /* 用inline-flex ,ul的宽度是由内容撑大的 */
            /* 用flex ,ul的宽度就是父级元素的百分比 */
            display: inline-flex;
            /* 几秒完成一个图到另一个图的变化 */
            transition: all .2s;

            /* 为什么要在这里添加transform?
               因为ul其实是几张图片在一条，但是显示的区域就那么大，所以要调节ul的transform
            */

        }

        .box img{
            display: block;
            width: 100vw;
            height: 47.4667vw;
        }

        ol{
            display: flex;
            position: absolute;
            left: 50%;
            bottom: 2.6667vw;
            transform: translateX(-50%);
        }

        ol li{
            width: 2.1333vw;
            height: 2.1333vw;
            background-color: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            margin: 1.0667vw;
        }

        .active{
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="ul-box">
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
        </ul>
        <ol></ol>
    </div>
    <script>
        // 获取ul
        var ul = document.querySelector("ul"); 

        // 获取单张图片的大小
        var width = ul.children[0].offsetWidth;

        // 获取图片的总数量
        var num = ul.children.length;

        // 获取ol,ol是存放小圆点的盒子
        var ol = document.querySelector("ol");

        // 记录当前播放到的是哪一张图片
        var currentIndex = 0;

        // 图片多长时间切换一次
        var intervalTime = 2000;

        // 动态生成小圆点
        for(var i = 0;i<num;i++){
            // 创建li
            var li = document.createElement("li");
            // 把创建的li追加到ol中
            ol.appendChild(li);
        }

        
        function dotactive(){
            for(var i = 0;i < num;i++){
                // classList返回元素的类名
                // 删除所有小圆点的类名active
                ol.children[i].classList.remove("active");
            }
            // 循环结束后，根据ol中li的当前索引添加类名active
            ol.children[currentIndex].classList.add("active");
        }

        dotactive();

        // 实现自动轮播的效果
        // function play(){
        //     dotactive();
        //     ul.style.transform = "translateX(-" + width * currentIndex + "px)";
        //     if(currentIndex < num - 1){
        //         currentIndex++;
        //     }else{
        //         currentIndex = 0;
        //     }
        // }

        // // 间歇定时器,几秒执行
        // var timer = setInterval(play,intervalTime);

    </script>
</body>
</html>